<template>
  <div class="bob-tabs">
    <div class="tabs">
      <div
        v-for="(tab, index) in tabs"
        :key="tab.code"
        class="tab"
        @click="setActiveTab(index, tab.code)"
        :style="{
          fontSize: index === activeIndex ? '20px' : '16px',
          color: index === activeIndex ? '#1D2129' : '#86909C',
        }"
      >
        <div>{{ tab.title }}</div>
        <div :class="{ active: index === activeIndex }"></div>
      </div>
    </div>

    <div class="tab-content" v-if="tabs[activeIndex].content">
      <div
        class="tab-content-button"
        v-for="(item, index) in tabs[activeIndex].content"
        :key="item.code"
        :class="{ activeButton: index === activeButton }"
      >
        <div v-if="tabs[activeIndex]" @click="tabButton(index, item.code)">
          {{ item.action }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

interface Tab {
  title: string;
  content?: Content[];
  code: number;
}
interface Content {
  action: string;
  code: number;
}

// 父组件传递的列表
const props = defineProps({
  tabs: {
    type: Array<Tab>,
  },
});

// 自组件向父组件传递
const emit = defineEmits(["getActionTab", "getActiveButton"]);

// 定义选项卡
// const tabs = ref<Tab[]>([
//   { title: "全部", content: [{action : '服务'},{action : '服务1'}] },
//   { title: "产品", content: [{action : '服务q'},{action : '服务w'}] },
//   { title: "融资", content: [{action : '服务q'},{action : '服务w'}]},
//   { title: "并购", content: [{action : '服务q'},{action : '服务w'}] },
// ]);

const activeTab = ref(0); // 默认激活的选项卡索引
const activeIndex = ref(0);

const setActiveTab = (index: number, code: number) => {
  activeTab.value = code; // 切换选项卡
  activeIndex.value = index;
  emit("getActionTab", activeTab.value);
};

const activeButton = ref(0); //默认激活按钮
const buttonCode = ref(0);
const tabButton = (index: number, code: number) => {
  
  activeButton.value = index;
  buttonCode.value = code;

  emit("getActiveButton", buttonCode.value);
};
</script>

<style lang="scss" scoped>
.bob-tabs {
  background-color: white;
  position: fixed;
  top: 44px;
  /* 根据需要调整，确保不与 nav-bar 重叠 */
  left: 0;
  right: 0;
  z-index: 1;
  /* 确保 tab 在其他内容之上 */
  padding: 15px;

  .tabs {
    display: flex;
    font-size: 16px;
    /* justify-content: space-between; */
    margin-bottom: 10px;
    align-items: baseline;

    .tab {
      margin: 0 15px;

      &:first-child {
        margin-left: 0;
      }
    }
  }

  .active {
    margin: 5px auto 0;
    width: 25px;
    border-bottom: 3px solid var(--van-primary-color);
    border-radius: 25px;
  }

  .tab-content {
    display: flex;

    &-button {
      width: 60px;
      height: 30px;
      font-size: 12px;
      background-color: #f2f3f5;
      border-radius: 15px;
      text-align: center;
      line-height: 30px;
      margin-right: 10px;
    }

    .activeButton {
      background-color: #ffeeee;
      color: #f4423e;
    }
  }
}
</style>

